<template>
  <header>
    <div class="search">
      <div>
        <i><img src="../assets/img/logo.png" alt=""></i>
        <span>听书</span>
        <router-link to="/search">
          <van-search
            v-model="value"
            shape="round"
            placeholder="请输入搜索关键词"
        />
        </router-link>
        <router-link to="/list">
          <van-icon name="chat-o" dot color="#FA6205" />
        </router-link>
      </div>
      

    </div>
  </header>
</template>
<script>
import { Toast } from 'vant';
export default {
  data() {
    return {
      value: '',
    };
  },
  methods: {
    onSearch(val) {
      Toast(val);
    },
  },
};
</script>
<style lang="less" scoped>
@import '../assets/font/font-style.css';
@import '../assets/css/varible.less';
.search{
  div{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    i{
      img{
        width: 40px;
        height: 40px;
      }
    }
    span{
      margin-left: -5px;
      font-weight: bold;
      font-size: 24px;
      font-family: a;
      color: @bgColor;
    }
  }
}
</style>